<div class="page navbar-fixed toolbar-fixed cached" data-page="index">
    <div class="page-content">
        <div class="tabs">
            <div class="tab active" id="home">
                <div class="home-view">
                    <div class="card">
                        <div class="card-header">
                            <div class="avatar"><img src="http://lorempixel.com/68/68/people/1"
                                                     alt="avatar"></div>
                            <div class="user flex-column">
                                <div class="name">Bob Brown</div>
                                <div class="time">#41 3 years ago</div>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="text">Behind every successful man there's a lot u unsuccessful
                                years. https://www.google.com/
                            </div> <!----></div>
                        <div class="card-footer flex-row"><a href="#"
                                                             class="tool tool-border flex-rest-width link"><span
                                class="iconfont icon-comment"></span> <span class="text">2</span></a> <a
                                href="#" class="tool flex-rest-width link"><span
                                class="iconfont icon-like"></span> <span class="text">1</span></a></div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <div class="avatar"><img src="http://lorempixel.com/68/68/people/8"
                                                     alt="avatar"></div>
                            <div class="user flex-column">
                                <div class="name">Thomas Addison</div>
                                <div class="time">#30 3 years ago</div>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="text">A strong man will struggle with the storms of fate.</div>
                            <!----></div>
                        <div class="card-footer flex-row"><a href="#"
                                                             class="tool tool-border flex-rest-width link"><span
                                class="iconfont icon-comment"></span> <span class="text">20</span></a>
                            <a href="#" class="tool flex-rest-width link"><span
                                    class="iconfont icon-like"></span> <span class="text">11</span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab" id="contacts">
                <div class="contacts-view">
                    <div class="list-block contacts-block">
                        <div class="list-block-group">
                            <ul>
                                <li class="list-group-title"><span>A</span></li>
                                <li class=""><a href="#" class="item-link" data-template="chatTemplate" data-context='{"toUser": "1", "nickName":"Alex Black"}'>
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/1">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Alex Black</div>
                                            <div class="item-after"><span>London</span></div>
                                        </div>
                                    </div>
                                </a></li>
                                <li class=""><a href="#" class="item-link" data-template="chatTemplate" data-context='{"toUser": "2", "nickName":"Alex Proti"}'>
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/5">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Alex Proti</div>
                                            <div class="item-after"><span>Moscow</span></div>
                                        </div>
                                    </div>
                                </a></li>

                            </ul>
                        </div>
                        <div class="list-block-group">
                            <ul>
                                <li class="list-group-title"><span>D</span></li>
                                <li class=""><a href="/message/?nickname=Daniel Ricci"
                                                class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/8">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Daniel Ricci</div>
                                            <div class="item-after"><span>Kiev</span></div>
                                        </div>
                                    </div>
                                </a></li>
                            </ul>
                        </div>
                        <div class="list-block-group">
                            <ul>
                                <li class="list-group-title"><span>I</span></li>
                                <li class=""><a href="/message/?nickname=Ivan Ivanov" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/3">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Ivan Ivanov</div>
                                            <div class="item-after"><span>Kiev</span></div>
                                        </div>
                                    </div>
                                </a></li>
                            </ul>
                        </div>
                        <div class="list-block-group">
                            <ul>
                                <li class="list-group-title"><span>K</span></li>
                                <li class=""><a href="/message/?nickname=Kate Lebedeva"
                                                class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/6">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Kate Lebedeva</div>
                                            <div class="item-after"><span>Odessa</span></div>
                                        </div>
                                    </div>
                                </a></li>
                                <li class=""><a href="/message/?nickname=Kate Shy" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/10">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Kate Shy</div>
                                            <div class="item-after"><span>Kiev</span></div>
                                        </div>
                                    </div>
                                </a></li>
                            </ul>
                        </div>
                        <div class="list-block-group">
                            <ul>
                                <li class="list-group-title"><span>M</span></li>
                                <li class=""><a href="/message/?nickname=Michael Fold"
                                                class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/1">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Michael Fold</div>
                                            <div class="item-after"><span>Praha</span></div>
                                        </div>
                                    </div>
                                </a></li>
                            </ul>
                        </div>
                        <div class="list-block-group">
                            <ul>
                                <li class="list-group-title"><span>N</span></li>
                                <li class=""><a href="/message/?nickname=Nadya Lovin" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/2">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Nadya Lovin</div>
                                            <div class="item-after"><span>Moscow</span></div>
                                        </div>
                                    </div>
                                </a></li>
                            </ul>
                        </div>
                        <div class="list-block-group">
                            <ul>
                                <li class="list-group-title"><span>O</span></li>
                                <li class=""><a href="/message/?nickname=Oleg Price" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/4">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Oleg Price</div>
                                            <div class="item-after"><span>Odessa</span></div>
                                        </div>
                                    </div>
                                </a></li>
                                <li class=""><a href="chat/1"
                                                class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/5">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Oleg Ryzhkov</div>
                                            <div class="item-after"><span>Kiev</span></div>
                                        </div>
                                    </div>
                                </a></li>
                            </ul>
                        </div>
                        <div class="list-block-group">
                            <ul>
                                <li class="list-group-title"><span>S</span></li>
                                <li class=""><a href="chat/2"
                                                class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><img class="avatar"
                                                                     src="http://lorempixel.com/68/68/people/10">
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title">Svetlana Kot</div>
                                            <div class="item-after"><span>Milan</span></div>
                                        </div>
                                    </div>
                                </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab" id="settings">
                <div class="settings-view">
                    <div class="list-block user-profile">
                        <ul>
                            <li class=""><a href="/profile/" class="item-link">
                                <div class="item-content">
                                    <div class="item-media"><img class="avatar"
                                                                 src="https://dearb.me/assets/images/avatar.png">
                                    </div>
                                    <div class="item-inner">
                                        <div class="detail">
                                            <div class="name">BelinChung</div>
                                            <div class="location"><span>City: </span> <span>Guangzhou China</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a></li>
                        </ul>
                    </div>
                    <div class="list-block">
                        <ul>
                            <li class=""><a href="/language/" class="item-link">
                                <div class="item-content">
                                    <div class="item-media"><i class="iconfont icon-language"></i></div>
                                    <div class="item-inner">
                                        <div class="item-title">Language</div>
                                    </div>
                                </div>
                            </a></li>
                        </ul>
                    </div>
                    <div class="list-block">
                        <ul>
                            <li class=""><a href="/feedback/" class="item-link">
                                <div class="item-content">
                                    <div class="item-media"><i class="iconfont icon-feedback2"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">Feedback</div>
                                    </div>
                                </div>
                            </a></li>
                        </ul>
                    </div>
                    <div class="list-block">
                        <ul>
                            <li class=""><a href="#about" class="item-link">
                                <div class="item-content">
                                    <div class="item-media"><i class="f7-icons">info_fill</i></div>
                                    <div class="item-inner">
                                        <div class="item-title">关于应用</div>
                                    </div>
                                </div>
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center" id="mainTitle">首页</div>
            <div class="right"><i class="f7-icons" id="scanBar">camera_fill</i></div>
        </div>
    </div>
    <div class="toolbar tabbar">
        <div class="toolbar-inner">
            <a href="#home" class="active tab-link"><i class="f7-icons">home_fill</i></a>
            <a href="#contacts" class="tab-link"><i class="f7-icons">persons_fill</i></a>
            <a href="#settings" class="tab-link"><i class="f7-icons">gear_fill</i></a>
        </div>
    </div>
</div>